---
title: Cài đặt
description: Bắt đầu và chạy với RainbowKit
---

# Cài đặt

## Bắt đầu và chạy với RainbowKit

### Khởi đầu nhanh

Bạn có thể dàn dựng một ứng dụng mới với RainbowKit + [wagmi](https://wagmi.sh) + [Next.js](https://nextjs.org) bằng một trong các lệnh sau, sử dụng trình quản lý gói mà bạn ưa thích:

```bash
npm init @rainbow-me/rainbowkit@latest
# or
pnpm create @rainbow-me/rainbowkit@latest
# or
yarn create @rainbow-me/rainbowkit
```

Điều này sẽ nhắc bạn nhập tên dự án, tạo một thư mục mới chứa một dự án mẫu và cài đặt tất cả các phụ thuộc cần thiết.

Ngoài ra, bạn có thể tích hợp thủ công RainbowKit vào dự án hiện có của bạn.

### Thiết lập thủ công

Cài đặt RainbowKit và các phụ thuộc liên quan của nó, [wagmi](https://wagmi.sh/), [viem](https://viem.sh), và [@tanstack/react-query](https://tanstack.com/query/v5).

```bash
npm install @rainbow-me/rainbowkit wagmi viem@2.x @tanstack/react-query
```

> Lưu ý: RainbowKit là một thư viện [React](https://reactjs.org/).

#### Nhập khẩu

Nhập khẩu RainbowKit, Wagmi và TanStack Query.

```tsx
import '@rainbow-me/rainbowkit/styles.css';

import {
  getDefaultConfig,
  RainbowKitProvider,
} from '@rainbow-me/rainbowkit';
import { WagmiProvider } from 'wagmi';
import {
  mainnet,
  polygon,
  optimism,
  arbitrum,
  base,
} from 'wagmi/chains';
import {
  QueryClientProvider,
  QueryClient,
} from "@tanstack/react-query";
```

#### Cấu hình

Cấu hình các chuỗi mong muốn và tạo các kết nối cần thiết. Bạn cũng sẽ cần thiết lập một cấu hình `wagmi`. Nếu dApp của bạn sử dụng kết xuất phía máy chủ (SSR), hãy đảm bảo đặt `ssr` thành `true`.

> Lưu ý: Mỗi dApp dựa vào WalletConnect hiện nay cần phải có được `projectId` từ [WalletConnect Cloud](https://cloud.walletconnect.com/). Điều này hoàn toàn miễn phí và chỉ mất vài phút.

```tsx line=4-99
...
import { getDefaultConfig } from '@rainbow-me/rainbowkit';

const config = getDefaultConfig({
  appName: 'My RainbowKit App',
  projectId: 'YOUR_PROJECT_ID',
  chains: [mainnet, polygon, optimism, arbitrum, base],
  ssr: true, // If your dApp uses server side rendering (SSR)
});
```

#### Bọc nhà cung cấp

Bọc ứng dụng của bạn với `RainbowKitProvider`, [`WagmiProvider`](https://wagmi.sh/react/api/WagmiProvider#wagmiprovider), và [`QueryClientProvider`](https://tanstack.com/query/v4/docs/framework/react/reference/QueryClientProvider).

```tsx
const queryClient = new QueryClient();

const App = () => {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>
          {/* Your App */}
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
};
```

#### Thêm nút kết nối

Sau đó, trong ứng dụng của bạn, nhập và hiển thị thành phần `ConnectButton`.

```tsx
import { ConnectButton } from '@rainbow-me/rainbowkit';

export const YourApp = () => {
  return <ConnectButton />;
};
```

RainbowKit sẽ xử lý việc lựa chọn ví của người dùng, hiển thị thông tin ví/giao dịch và xử lý việc đổi mạng/chuyển ví.

#### Cài đặt công cụ xây dựng bổ sung

Một số công cụ xây dựng sẽ yêu cầu cài đặt bổ sung.

##### Remix

Khi sử dụng [Remix](https://remix.run), bạn phải tạo bộ đệm, sự kiện và các mô-đun http. Tham khảo cấu hình Remix dưới đây, hoặc [dự án mẫu Remix của chúng tôi](https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-remix).

```ts
/** @type {import('@remix-run/dev').AppConfig} */
export default {
  ignoredRouteFiles: ["**/.*"],
  browserNodeBuiltinsPolyfill: {
    modules: { buffer: true, events: true, http: true },
  },
};
```

### Chuẩn bị triển khai

Theo mặc định, dApp của bạn sử dụng các nhà cung cấp RPC công khai cho mỗi chuỗi để lấy số dư, giải quyết tên ENS, và nhiều hơn nữa. Điều này thường có thể gây ra vấn đề về độ tin cậy cho người dùng của bạn do các nút công cộng bị giới hạn tốc độ. Thay vào đó, bạn nên mua quyền truy cập vào một nhà cung cấp RPC thông qua các dịch vụ như [Alchemy](https://www.alchemy.com/) hoặc [QuickNode](https://www.quicknode.com/), và định nghĩa các Kênh truyền riêng của bạn trong Wagmi. Điều này có thể đạt được bằng cách thêm tham số `transports` trong `getDefaultConfig` hoặc thông qua `createConfig` của Wagmi trực tiếp.

Một Kênh truyền là lớp giữa mạng xử lý việc gửi các yêu cầu JSON-RPC tới Nhà cung cấp nút Ethereum (như Alchemy, Infura, v.v.).

**Ví dụ với kênh truyền `http`**

```tsx
import { getDefaultConfig } from '@rainbow-me/rainbowkit';
import { http } from 'wagmi';
import { mainnet, sepolia } from 'wagmi/chains';

const config = getDefaultConfig({
  appName: 'My RainbowKit App',
  projectId: 'YOUR_PROJECT_ID',
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http('https://eth-mainnet.g.alchemy.com/v2/...'),
    [sepolia.id]: http('https://eth-sepolia.g.alchemy.com/v2/...'),
  },
});
```

Để biết thêm chi tiết, hãy xem [tài liệu wagmi về kênh truyền](https://wagmi.sh/core/api/transports#transports).

### Thêm chức năng của riêng bạn

Giờ đây khi người dùng của bạn có thể kết nối ví của họ, bạn có thể bắt đầu xây dựng phần còn lại của ứng dụng bằng [wagmi.](https://wagmi.sh)

Gửi các giao dịch, tương tác với các hợp đồng, giải quyết chi tiết ENS và nhiều hơn nữa với bộ công cụ React hooks toàn diện của wagmi.

Để biết thêm chi tiết, hãy xem [tài liệu wagmi.](https://wagmi.sh)

### Các ví dụ bổ sung

Để xem một số ví dụ hoạt động của RainbowKit, hoặc thậm chí sử dụng chúng để tự động tạo một dự án mới, hãy xem [các ví dụ chính thức](https://github.com/rainbow-me/rainbowkit/tree/main/examples).

Để thử RainbowKit trực tiếp trong trình duyệt của bạn, hãy xem các liên kết CodeSandbox dưới đây:

- với [Create React App](https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-create-react-app)
- với [Next.js](https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-next)
- với [Bộ định tuyến ứng dụng Next.js](https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-next-app)
- với [Remix](https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-remix)
- với [Vite](https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-vite)
- với [React Router](https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-react-router)
